<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改素材')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-material-edit" th:object="${material}">
            <input name="materialId" th:field="*{materialId}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label">素材名称：</label>
                <div class="col-sm-8">
                    <input name="materialName"  th:field="*{materialName}"  id="materialName" class="form-control" type="text" required style="width:calc(100% - 100px);float: left; margin-right: 3px;">
                    <button id="uploadBtn"  type="button" class="btn btn-sm btn-primary" style="display: inline-block; width: 95px;position: relative;float: left;height: 33px;"><i class="fa fa-check"></i>上 传</button>&nbsp;
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">素材类型：</label>
                <div class="col-sm-8">
                    <input type="hidden" id="materialType" name="materialType" th:value="*{materialType}">
                    <div class="radio-box" th:each="dict : ${@dict.getType('material_type')}">
                        <input type="radio" th:id="${'materialType_' + dict.dictCode}" th:readonly="readonly" name="materialTypeDisplay" th:value="${dict.dictValue}"  >
                        <label th:for="${'materialType_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">素材分组：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="groupId" name="groupId" type="hidden" th:field="*{groupId}" />
                        <input class="form-control" type="text" onclick="selectMaterialGroupTree()" id="groupName" readonly="true" th:field="*{groupName}">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">素材描述：</label>
                <div class="col-sm-8">
                    <textarea  name="description" class="form-control">[[${material.description}]]</textarea>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">启用状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('use_state')}">
                        <input type="radio" th:id="${'useState_' + dict.dictCode}"  name="useState" th:value="${dict.dictValue}"  th:checked="${dict.default}"  th:field="*{useState}" >
                        <label th:for="${'useState_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">保存路径：</label>
                <div class="col-sm-8">
                    <input name="savePath" id="savePath" th:field="*{savePath}" readonly class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">素材大小：</label>
                <div class="col-sm-8">
                    <input type="hidden" name="materialSize" id="materialSize" th:value="*{materialSize}">
                    <input id="materialSizeDisplay" readonly class="form-control" type="text">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">宽：</label>
                <div class="col-sm-8">
                    <input name="width" id="width" readonly  th:field="*{width}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">高：</label>
                <div class="col-sm-8">
                    <input name="height" id="height" readonly th:field="*{height}" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />

    <script th:src="@{/ajax/libs/plupload/plupload.full.min.js}"></script>
    <script type="text/javascript">
        //1图片2 视频3文本4音频5压缩6其它
        //图片
        var imageReg = /.+\.(gif|jpg|jpeg|png|webp|bmp)/i;
        //视频
        var vedioReg = /.+\.(mpg?4|3gp|wav|wma|wmv)/i;
        //文本
        var textReg=/.+\.(txt|pdf|doc|docx|xls|xlsx|ppt|pptx|ini)/i;
        //视频
        var audioReg = /.+\.(mp3|mid|wav|wma|avi)/i;
        //压缩
        var zipReg = /.+\.(zip|rar|gz|bz2|jar)/i;

        //素材类型
        //图片
        var MATERIAL_TYPE_IMAGE="1";
        //视频
        var MATERIAL_TYPE_VIDEO="2";
        //文本
        var MATERIAL_TYPE_TXT="3";
        //音频
        var MATERIAL_TYPE_AUDIO="4";
        //压缩
        var MATERIAL_TYPE_ZIP="5";
        //其它
        var MATERIAL_TYPE_OTHER="6";
        function autoSetMaterialType(name){
            var v=MATERIAL_TYPE_OTHER;
            if(imageReg.test(name)){
                v=MATERIAL_TYPE_IMAGE;
            }else if(vedioReg.test(name)){
                v=MATERIAL_TYPE_VIDEO;
            }else if(textReg.test(name)){
                v=MATERIAL_TYPE_TXT;
            }else if(audioReg.test(name)){
                v=MATERIAL_TYPE_AUDIO;
            }else if(zipReg.test(name)){
                v=MATERIAL_TYPE_ZIP;
            }else{
                v=MATERIAL_TYPE_OTHER;
            }
            $("[name='materialType']").val(v);
            $("[name='materialTypeDisplay'][value='"+v+"']").iCheck('check');
        }
        $(function(){
            $("[name='materialTypeDisplay']").iCheck('disable');
            var v=$("#materialSize").val();
            $("#materialSizeDisplay").val(renderFileSize(v));

            var materialType=$("#materialType").val();
            $("[name='materialTypeDisplay'][value='"+materialType+"']").iCheck('check');
        })
        var prefix = ctx + "cms/material";
        $("#form-material-edit").validate({
            focusCleanup: true
        });
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-material-edit').serialize());
            }
        }

        var prefixGroup = ctx + "cms/materialGroup";
        /*素材分组-新增-选择父部门树*/
        function selectMaterialGroupTree() {
            var options = {
                title: '素材分组选择',
                width: "380",
                url: prefixGroup + "/selectMaterialGroupTree/" + $("#groupId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            $("#groupId").val(body.find('#treeId').val());
            $("#groupName").val(body.find('#treeName').val());
            layer.close(index);
        }
    </script>


    <script type="text/javascript">
        var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
            runtimes: 'html5,silverlight,html4,flash',
            browse_button : 'uploadBtn',
            url : ctx+"cms/uploadMaterial",
            flash_swf_url : "/ajax/libs/plupload/Moxie.swf",
            silverlight_xap_url : "/ajax/libs/plupload/Moxie.xap",
            filters: {
                max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
                mime_types : [{ title : "图片文件", extensions:"jpg,jpeg,gif,png,bmp" },
                    {title: "视频文件", extensions: "mp4,mpeg4,3gp,wav,wma,wmv"},
                    {title: "文本文件", extensions: "txt,pdf,doc,docx,xls,xlsx,ppt,pptx,ini"},
                    {title: "视频文件", extensions: "zip,rar,gz,bz2,jar"},
                    {title: "音频文件", extensions: "mp3,mid,wav,wma,avi"}
                ]
            }//只允许上传图片文件
        });
        //绑定文件添加进队列事件
        uploader.bind('FilesAdded',function(uploader,files){
            uploader.start(); //开始上传
        });
        uploader.bind('Error',function(up, err){
            alert(err.message);//上传出错的时候触发
        });
        uploader.bind("FileUploaded", function(up, file, res){

            var json=res.response;
            json=JSON.parse(json);

            if(json.code!=0&&json.code!='0'){
                $.modal.alertError(json.msg);
            }
            uploadCallback(json.data);

        })
        window.onload = function() {
            uploader.init(); //初始化
        };
        function uploadCallback(json){
            $("#width").val(json.width);
            $("#height").val(json.height);
            $("#materialSizeDisplay").val(renderFileSize(json.size));
            $("#materialSize").val(json.size);
            $("#materialName").val(json.name);
            $("#savePath").val(json.path);
            autoSetMaterialType(json.name);
        }
    </script>
</body>
</html>